<template>
  <nut-wrapper>
    <view class="index-page tab-bar-page">
      <!-- 搜索栏 -->
      <view class="search-bar">
        <nut-searchbar placeholder="搜索商品" :background="cardBackground" />
      </view>

      <!-- 轮播图 -->
      <nut-swiper
        :init-page="0"
        :pagination-visible="true"
        pagination-color="#426543"
        auto-play="3000"
        class="banner"
      >
        <nut-swiper-item v-for="(item, index) in bannerList" :key="index">
          <image :src="item.imgUrl" mode="aspectFill" />
        </nut-swiper-item>
      </nut-swiper>

      <!-- 功能导航 -->
      <view class="nav-grid">
        <view
          class="nav-item"
          v-for="(item, index) in navList"
          :key="index"
          @click="handleNavClick(item)"
        >
          <i :class="item.icon" class="iconfont" style="font-size: 50rpx" />
          <text>{{ item.name }}</text>
        </view>
      </view>

      <!-- 商品推荐 -->
      <view class="recommend">
        <view class="section-title">
          <text>商品推荐</text>
          <text class="more">查看更多</text>
        </view>
        <view class="product-list">
          <view
            class="product-item"
            v-for="(item, index) in productList"
            :key="index"
          >
            <image :src="item.image" mode="aspectFill" />
            <view class="product-info">
              <text class="product-name">{{ item.name }}</text>
              <text class="product-price">¥{{ item.price }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </nut-wrapper>
</template>

<script>
import Taro from "@tarojs/taro";
import { useThemeStore } from "@/stores/themeStore";

export default {
  data() {
    return {
      bannerList: [
        { imgUrl: "https://img.yzcdn.cn/vant/apple-1.jpg" },
        { imgUrl: "https://img.yzcdn.cn/vant/apple-2.jpg" },
        { imgUrl: "https://img.yzcdn.cn/vant/apple-3.jpg" },
      ],
      navList: [
        {
          name: "日历组件",
          icon: "icon-xinpinshangjia",
        },
        {
          name: "下拉框组件",
          icon: "icon-xianshitehui",
        },
        {
          name: "积分商城",
          icon: "icon-jifenshangcheng",
        },
        {
          name: "会员中心",
          icon: "icon-huiyuanzhongxin",
        },
      ],
      productList: [
        {
          name: "商品1",
          price: "99.00",
          image: "https://img.yzcdn.cn/vant/apple-1.jpg",
        },
        {
          name: "商品2",
          price: "199.00",
          image: "https://img.yzcdn.cn/vant/apple-2.jpg",
        },
        {
          name: "商品3",
          price: "299.00",
          image: "https://img.yzcdn.cn/vant/apple-3.jpg",
        },
        {
          name: "商品4",
          price: "399.00",
          image: "https://img.yzcdn.cn/vant/apple-1.jpg",
        },
      ],
    };
  },
  computed: {
    cardBackground() {
      const themeStore = useThemeStore();
      return themeStore.currentTheme["--card-background"];
    },
  },
  methods: {
    handleNavClick(item) {
      console.log("点击了导航:", item.name);
      if (item.name === "日历组件") {
        Taro.navigateTo({
          url: "/packageA/pages/test/test",
        });
      } else if (item.name === "下拉框组件") {
        Taro.navigateTo({
          url: "/packageA/pages/select/index",
        });
      }
    },
  },
  onLoad() {
    wx.hideTabBar();
  },
};
</script>

<style lang="scss">
.index-page {
  min-height: 100vh;
  background-color: var(--background-color);

  .search-bar {
    padding: 20rpx;
    background-color: var(--card-background);
  }

  .banner {
    height: 400rpx;
    margin: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
    background-color: var(--card-background);

    image {
      width: 100%;
      height: 100%;
    }
  }

  .nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    padding: 40rpx;
    background-color: var(--card-background);
    margin: 20rpx;
    border-radius: 16rpx;

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10rpx;

      image {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 16rpx;
      }

      text {
        font-size: var(--nut-font-size-2, 28rpx);
        color: $primary-color;
        font-weight: bold;
      }
    }
  }

  .recommend {
    margin: 20rpx;
    background-color: var(--card-background);
    border-radius: 16rpx;
    padding: 30rpx;

    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;

      text {
        font-size: var(--nut-font-size-3);
        font-weight: bold;
        color: var(--text-color);
      }

      .more {
        font-size: var(--nut-font-size-2);
        color: var(--text-color-secondary);
      }
    }

    .product-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20rpx;

      .product-item {
        background-color: var(--card-background);
        border-radius: 16rpx;
        overflow: hidden;
        border: 1px solid var(--border-color);

        image {
          width: 100%;
          height: 300rpx;
        }

        .product-info {
          padding: 20rpx;
          display: flex;
          align-items: center;
          gap: 10rpx;
          justify-content: space-between;

          .product-name {
            font-size: var(--nut-font-size-2);
            color: var(--text-color);
            margin-bottom: 10rpx;
          }

          .product-price {
            font-size: var(--nut-font-size-2);
            color: $primary-color;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
